css.properties.mask-mode - Safari bug

[estelle]

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

The default value for mask-mode is match-source.
SVG mask by default is luminance.
Safari treats it as alpha.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

safarit defaulting to luminance when the mask source is an svg <mask> element.

Did you test this? If so, how?

https://codepen.io/estelle/pen/pvvwpML

the heart center should be lighter in the second heart, if not both.
i was testing the mask-type attribute, which is supported in chromium and FF, but isn't spec'ed, when i found this bug.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/mask-mode

MDN metadata

MDN page report details

• Query: css.properties.mask-mode
• Report started: 2025-04-26T00:31:33.234Z

[caugner]

I can reproduce the issue in Safari 18.4 (even when setting mask-mode: luminance explicitly), and this WebKit bug comment suggests that the luminance value has partial support (the value can be set, but has the same effect as alpha):

mask-mode: luminance just seems broken in general.

Given that there are just two concrete values (alpha and luminance), I would suggest to mark both mask-mode and mask-mode: luminance as partial implementation, with notes pointing to bug 282530.

@estelle Would you like to open a PR with these changes? 🙏

[caugner]

@foolip @ddbeck Heads-up that this Safari limitation means that masks moves from Baseline New to Baseline Limited.